<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lushengyang前端作品集</title>
    <link rel="icon" href="LSY_favition.ico">
    <style>
        body,dl,dd,ul,li,p{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        em,i{
            font-style: normal;
        }
        .warp{
            width: 300px;
            padding: 5px;
            border: 15px solid rgba(200,200,200,0.3);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            margin: 50px auto;
        }
        .list{
            width: 300px;
        }
        .list .list-dt{
            height: 30px;
            position: relative;
            cursor: pointer;
            background: #da5c6d;
            color: #ffffff;
            margin-bottom: 1px;
        }
        .list .list-dt p{
            float: left;
            width: 260px;
            text-indent: 20px;
            font: 600 18px/30px "微软雅黑";
        }
        .list .list-dt .list-dt-icon{
            float: left;
            height: 30px;
            width: 16px;
            background: url("images/off.png") no-repeat 0 7px;
        }
        .list #open .list-dt-icon{
            background: url("images/open.png") no-repeat 0 7px;
        }
        .list .list-dd{
            display: none;
        }
        .list .list-dd li a{
            display: block;
            height: 25px;
            font: 500 16px/25px "微软雅黑";
            text-indent: 20px;
            background: #daaa9e;
            margin-bottom: 1px;
        }
    </style>
    <script src="js/jquery-1.11.2.js"></script>
    <script>
        $(function () {
            var str = '',
                data =[
                    {
                        title:'第一章 表单常用实例',
                        content:[
                            {url: 'example/b/将单词首字母大写.html', title: '1)单词首字母大写'},
                            {url: 'example/b/敏感词转换.html', title: '2)敏感词屏蔽'},
                            {url: 'example/b/提示输入框可输入剩余字数.html', title: '3)提示输入框可输入剩余字数'},
                            {url: 'example/b/正则验证用户输入格式.html', title: '4)验证用户输入格式'}
                        ]
                    },
                    {
                        title:'第二章 css3小实例',
                        content:[
                            {url: 'example/a/css3Clock.html', title: '1)css3小时钟'}
                        ]
                    },
                    {
                        title:'第三章 图片展示所用',
                        content:[
                            {url: 'example/c/01/index.html', title: '1)360度图片展示'},
                            {url: 'example/c/02/index.html', title: '2)图片翻页切换效果'},
                            {url: 'example/c/03/index.html', title: '3)常用图片切换-整个翻页'},
                            {url: 'example/c/04/index.html', title: '4)常用图片切换--单个翻页'},
                            {url: 'example/c/05/index.html', title: '5)图片淡入淡出切换'}
                        ]
                    },
                    {
                        title:'第四章 jQuery小实例',
                        content:[
                            {url: 'example/d/01/index.html', title: '1)动画版数字时钟'},
                            {url: 'example/d/02/index.html', title: '2)三种弹窗'},
                            {url: 'example/d/03/index.html', title: '3)放大镜效果'},
                            {url: 'example/d/04/index.html', title: '4)百度文库评分效果'},
                            {url: 'example/d/05/index.html', title: '5)模拟window桌面右键菜单'},
                            {url: 'example/d/06/index.html', title: '6)广告的随机移动'}
                        ]
                    },
                    {
                        title:'第五章 Bootstrap',
                        content:[
                            {url: 'example/e/01/index.html', title: '1)Bootstrap注册实例'},
                            {url: 'example/e/02/index.html', title: '2)Bootstrap制作简单网站'}
                        ]
                    },
                    {
                        title:'第六章 简历',
                        content:[
                            {url: 'example/f/index.html', title: '1)网页简历'}
                        ]
                    }
                ];

            buildList();
            contrlList();
            bagChange();
            //控制手风琴列表
            function contrlList() {
                $('.list-dt').on('click',function () {
                    $('.list-dd').stop();
                    $(this).siblings('dt').removeAttr('id');
                    if ($(this).attr('id') == 'open'){
                        $(this).removeAttr('id').next().slideUp();
                    }else{
                        $(this).attr('id','open').next().slideDown().siblings('dd').slideUp();
                    }
                });
            }
            //控制子级背景的变化
            function bagChange() {
                $('.list-dd li a').hover(function () {
                    $(this).stop().animate({opacity:0.7},'slow');
                },function () {
                    $(this).stop().animate({opacity:1},'slow');
                });
            }
            //生成列表
            function buildList() {
                for(var i=0;i<data.length;i++){
                    var elem = data[i];
                    var son = '';
                    var sonElem = elem.content;
                    for(var j=0;j<sonElem.length;j++){
                        son += '<li><i></i><a href="'+sonElem[j].url+'" target="_blank">'+sonElem[j].title+'</a></li>';
                    }
                    str += '<dt class="list-dt">';
                    str += '<p>'+elem.title+'</p>';
                    str += '<i class="list-dt-icon"></i>';
                    str += '</dt>';
                    str += '<dd class="list-dd">';
                    str += '<ul class="son-list">'+son+'</ul>';
                    str += '</dd>';
                }
                $('.list').html(str);
            }
        })
    </script>
</head>
<body>
    <div class="warp">
        <dl class="list">
            <dt class="list-dt">
                <p>标题一</p>
                <i class="list-dt-icon"></i>
            </dt>
            <dd class="list-dd">
                <ul>
                    <li><i></i><a href="javascript:;">内容1</a></li>
                </ul>
            </dd>
        </dl>
    </div>
</body>
</html>